<template>
  <div class="services-container">
    <!-- 页面背景颜色 -->
    <div class="page-background"></div>

    <!-- 白色圆角矩形卡片 -->
    <div class="card">
      <!-- 标题 -->
      <div class="card-title">服务项目</div>

      <!-- vant2的宫格组件 -->
      <van-grid class="service-grid" column-num="2" gutter="10px">
        <van-grid-item
          icon="service-o"
          text="联系客服"
          @click="handleGridClick({ text: '联系客服', icon: 'service-o' })"
        />
        <van-grid-item
          icon="manager-o"
          text="联系老师"
          @click="handleGridClick({ text: '联系老师', icon: 'manager-o' })"
        />
        <van-grid-item
          icon="notes-o"
          text="课表查询"
          @click="handleGridClick({ text: '课表查询', icon: 'notes-o' })"
        />
        <van-grid-item
          icon="user-circle-o"
          text="修改信息"
          @click="handleGridClick({ text: '修改信息', icon: 'user-circle-o' })"
        />
        <van-grid-item
          icon="description-o"
          text="订单查询"
          @click="handleGridClick({ text: '订单查询', icon: 'description-o' })"
        />
      </van-grid>
      <!-- 修正了关闭标签 -->
    </div>

    <!-- 添加返回按钮 -->
    <button class="back-button" @click="goBack">《返回</button>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";

export default {
  name: "ServicesForm",
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  methods: {
    // 添加返回功能的方法
    goBack() {
      window.history.back(); // 使用浏览器的历史记录返回上一页
    },
    // 处理宫格点击事件
    handleGridClick(item) {
      console.log("点击了：", item.text);
      // 在这里可以添加点击后的处理逻辑，比如导航到对应的页面
    },
  },
};
</script>

<style scoped>
/* 页面背景颜色 */
.page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c0e0f8; /* 设置页面背景颜色为浅蓝色 */
  z-index: -1; /* 确保背景颜色在卡片下方 */
}

/* 白色圆角矩形卡片 */
/* 白色圆角矩形卡片 */
.card {
  position: relative;
  z-index: 1; /* 确保卡片在页面背景之上 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  max-width: 310px; /* 限制卡片最大宽度 */
  margin: 0 10px; /* 左右边缘各留10px */
  margin: 175px auto 0; /* 顶部100px外边距，自动水平居中，底部0外边距 */
}

/* 其他样式保持不变 */

/* 标题样式 */
.card-title {
  font-weight: bold; /* 字体加粗 */
  font-size: 24px; /* 字体大小 */
  margin-bottom: 20px; /* 与宫格组件之间的间距 */
  text-align: center; /* 居中显示 */
}

/* 返回按钮样式（如果需要调整） */
.back-button {
  position: absolute; /* 绝对定位 */
  top: 20px; /* 距离顶部20px */
  left: 20px; /* 距离左侧20px */
  z-index: 2; /* 确保按钮在卡片之上 */
  background-color: #c0e0f8; /* 与页面背景相同颜色 */
  color: #5e5e5e; /* 按钮文字颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  padding: 8px 16px; /* 内边距 */
  cursor: pointer; /* 鼠标悬停时显示为手形指针 */
}

/* vant2宫格组件样式（如果需要自定义） */
</style>
